<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-鼠标跟随</title>
    <style>
        #head{
            width: 200px;
            height: 200px;
            background: yellow;
            position: relative;
        }
        #head_detail{
            width: 250px;
            height: 250px;
            background: red;
            position: absolute;
            display: block;
            pointer-events: none;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div id="head">我是头
        <div id="head_detail">
            我是头的详情
        </div>
    </div>


    <script>
        head.onmousemove = function(evt){
            console.log('鼠标移动')
            head_detail.style.left = evt.offsetX + 'px'
            head_detail.style.top = evt.offsetY + 'px'
        }
        head.onmouseenter = function(){
            head_detail.style.display = 'block'
        }
        head.onmouseleave = function(){
            head_detail.style.display = 'none'
        }
    </script>
</body>
</html>